<template>
    <div class="quanzhong">
        <div class="box">
            <video data-v-c88d2986="" src="@/assets/sp/video.3cf57b17.mp4" autoplay="autoplay" loop="loop" muted="muted"
                style="width: 100%; height: 100%; object-fit: fill;"></video>
        </div>

        <!-- 写 中间的框框 -->
        <div class="login_mianban">
            <!-- login -->
            <div class="login_tupian">
                <img src="@/assets/logo1.png" alt="">
            </div>
            <!-- form表单 -->
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item :style="{ width: '420px' }" class="style" prop="Nickname">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.Nickname" placeholder="账号"></el-input>
                </el-form-item>
                <!-- ----- -->
                <el-form-item :style="{ width: '420px' }" class="style2" prop="password">
                    <el-input placeholder="密码" prefix-icon="el-icon-unlock" type="password" v-model="form.password"
                        autocomplete="off" show-password></el-input>
                </el-form-item>
                <!-- ----- -->
                <el-form-item :style="{ width: '420px' }" class="style2" prop="yzm">
                    <el-input placeholder="验证码" prefix-icon="el-icon-s-promotion" v-model="form.yzm">
                        <template slot="append">
                            <img v-if="isShow" :src="yzmxx" alt="" class="lalala" @click="yzm_btn">
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <el-button class="dlu_style" @click="btn_dlu">登录</el-button>
        </div>
    </div>
</template>

<script>
import { ManagerCaptcha, ManagerLogin } from '@/api/login'
import { randomNum } from '@/utils'
export default {
  name: 'MyLogin',

  data () {
    return {
      isShow: false,
      yzmxx: '',
      randomId: randomNum(24, 16),
      form: {
        Nickname: 'demo',
        password: '888itcast.CN764%...',
        yzm: ''
      },
      /* 验证信息 */
      rules: {
        Nickname: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        yzm: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {

  },
  created () {
    /* 页面一打开就让他触发一次验证码的点击事件 */
    this.yzm_btn()
  },
  methods: {
    btn_dlu () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          /* 这是通过表单验证后的东西 */
          const res = await ManagerLogin({
            account: this.form.Nickname,
            password: this.form.password,
            code: this.form.yzm,
            key: this.randomId
          })
          if (res.status === 200) {
            console.log(res)
            this.$message(res.data.msg)
            /* 将token存储到vuex中 */
            this.$store.commit('user/GETTOKEN', res.data.data.token.token)
            /* 再将 用户信息存储到vuex中的user中 */
            this.$store.commit('user/GETUSERINFO', res.data.data.user)
            console.log('这是用户信息', res.data.data.user)
            /* 跳转成功后让他跳转到首页 */
            this.$router.push('/shouye')
          } else {
            this.$message(res.data.msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /* 验证码点击事件 */
    async yzm_btn () {
      this.isShow = false
      this.yzmxx = ''
      const res = await ManagerCaptcha(this.randomId)
      console.log(this.randomId)
      this.isShow = true
      /* 将获取到的数据保存在data中 */
      this.yzmxx = res.request.responseURL
    }
  }
}
</script>

<style lang="scss" scoped>
.lalala{
    width: 90px;
    height: 30px;
}
.lalala:hover{
    cursor: pointer;
}
.dlu_style {
    background-color: #e15536;
    margin-left: 47px;
    width: 370px;
    height: 54px;
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
}

.style {
    margin-left: -20px;
    margin-top: 60px;
}

.style2 {
    margin-left: -20px;
}

.login_tupian {
    width: 198px;
    height: 63px;
    margin: 0 auto;

    img {
        margin-top: 30px;
        width: 100%;
        height: 100%;
    }
}

.login_mianban {
    width: 453px;
    height: 493px;
    background-color: #ffffff;
    margin: 0 auto;
    transform: translateY(50%);
    border-radius: 20px;
}

.box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.sp {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}
</style>
